<template>
  <div class="panel">
    <div class="panel-header">
      <slot name="header">
        {{ pageName }}
      </slot>
    </div>
    <div class="detail-content">
      <div class="detail-content_ul">
        <ul>
          <li
            v-for="item in columns.filter((item) => {
              return item.ifRender !== undefined
                ? typeof item.ifRender === 'function'
                  ? item.ifRender(dataSource)
                  : btn.ifRender
                : true
            })"
            :key="typeof item.label === 'function' ? item.label() : item.label"
          >
            <slot v-if="item.slot" :name="item.slot" />
            <template v-else>
              <span class="detail-wrapper-label"
                >{{
                  typeof item.label === 'function' ? item.label() : item.label
                }}：</span
              >
              <span class="detail-wrapper-text">
                <span v-if="item.formatter">
                  {{
                    typeof item.formatter(dataSource) !== 'undefined'
                      ? item.formatter(dataSource)
                      : '--'
                  }}
                </span>
                <span v-else>
                  {{
                    typeof getValueByPath(dataSource, item.value) !==
                    'undefined'
                      ? getValueByPath(dataSource, item.value)
                      : '--'
                  }}
                </span>
              </span>
            </template>
          </li>
        </ul>
        <!-- <el-row>
          <el-col></el-col>
        </el-row> -->
      </div>
      <div>
        <img v-if="imgSrc" :src="imgSrc" />
        <div class="detall-btn-wrapper" v-if="filterButtons">
          <el-button
            v-for="item in filterButtons"
            :key="item.label"
            @click="item.click"
            :icon="item.icon"
            :type="item.type"
          >
            {{ item.label }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getValueByPath } from '@/utils'
export default {
  name: 'DetailPanel',
  props: {
    dataSource: {
      type: Object,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
    buttons: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
    },
    imgSrc: {
      type: String,
    },
  },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    pageName() {
      return this.title || this.$route.meta.title
    },
    filterButtons() {
      return this.buttons.filter((btn) => {
        return btn.ifRender !== undefined
          ? typeof btn.ifRender === 'function'
            ? btn.ifRender(this.dataSource) &&
              (!btn.resourceId || this.resourceSet.includes(btn.resourceId))
            : btn.ifRender &&
              (!btn.resourceId || this.resourceSet.includes(btn.resourceId))
          : !btn.resourceId || this.resourceSet.includes(btn.resourceId)
      })
    },
  },
  methods: {
    getValueByPath,
  },
}
</script>
<style lang="scss" scoped>
.panel {
  .detail-content {
    display: flex;
    padding: 0 39px 56px;

    .detall-btn-wrapper {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      margin-top: 32px;
    }

    .detail-content_ul {
      width: 100%;
      ul {
        padding: 0px;
        margin-top: 16px;
        border-radius: 3px;
        display: flex;
        flex-wrap: wrap;
        font-size: 16px;
        li {
          background: #fff;
          min-height: 70px;
          display: flex;
          align-items: center;
          padding: 0 15px;
          flex: 50%;
          .detail-wrapper-label {
            word-break: keep-all;
          }
          .detail-wrapper-text {
            color: #988ca4;
          }

          border-bottom: 1px solid #eff2f7;
          &:nth-child(4n-1),
          &:nth-child(4n) {
            background: #faf8fd;
          }

          &:last-child:nth-child(2n + 1) {
            width: 100%;
          }
        }
      }
    }
  }
  .detail-panel__header {
    padding-top: 14px;
    .header-title {
      &::before {
        content: '';
        height: 14px;
        width: 4px;
        display: inline-block;
        background: #4c71f9;
        margin-left: 30px;
        margin-right: 14px;
      }
    }
    &::after {
      content: '';
      background: #c9c9c9;
      height: 1px;
      width: 100%;
      margin: 18px 0 0;
      display: block;
      transform: scaleY(0.5);
    }
  }
}
</style>
